<template>
  <div class="mod-user">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">

      <el-date-picker
        v-model="dataForm.selectDate"
        type="daterange"
        value-format="yyyyMMdd"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="getDataList"
        class="mod-picker"
        >
      </el-date-picker>
      <el-select v-model="dataForm.marketId" placeholder="所属贷超">
        <el-option  value="">请选择</el-option>
        <el-option v-for="market in marketList" :key="market.id" :value="market.id">
          {{ market.name }}
        </el-option>
      </el-select>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList1"
      border
      v-loading="dataListLoading"
      :span-method="objectSpanMethod"
      style="width:100%;">
          <el-table-column
                prop="date"
                header-align="center"
                align="center"
                width="150"
                label="日期"
              >
          </el-table-column>
          <el-table-column prop="logo" header-align="center" align="center" width="120" label="logo">
            <template   slot-scope="scope">            
              <img :src="scope.row.logo"  width="25" height="25" />
            </template>
          </el-table-column>
          <el-table-column
              prop="productName"
              header-align="center"
              align="center"
              width="230"
              label="产品名称"
              >
          </el-table-column>
          <el-table-column
              prop="applyCount"
              header-align="center"
              align="center"
              width=""
              label="申请uv"
              >
          </el-table-column>

          <el-table-column
              prop="detailCount"
              header-align="center"
              align="center"
              width=""
              label="详情uv"
              >
          </el-table-column>

          <el-table-column
              prop="applySum"
              header-align="center"
              align="center"
              width=""
              label="申请总和"
              >
          </el-table-column>
          <el-table-column
              prop="detailSum"
              header-align="center"
              align="center"
              width=""
              label="详情总和"
              >
          </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataForm: {
          selectDate: '',
          marketId: ''
        },
        uvCount: 0,
        dataList: [],
        dataList1: [],
        spanArr: [],
        position: 0,
        dataListLoading: false,
        marketList: [],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        }
      }
    },
    activated () {
      this.dataForm.selectDate = [this.getDateNow(4),this.getDateNow(0)]
      this.dataForm.marketId = ''
      this.getDataList()
    },
    created () {
      this.$http({
        url: this.$http.adornUrl('/api/market/select'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        this.marketList = data && data.code === 0 ? data.list : []
      })
    },
    methods: {
      getDateNow(timeOff){
        var mDate = new Date(new Date().getTime()-timeOff*24*60*60*1000);
        var year = mDate.getFullYear();
        var month = mDate.getMonth()+1;
        month = month> 10? month:'0'+month;
        var day = mDate.getDate();
        day = day >10 ?day :'0'+day
        return year+month+day;
      },
      // 获取数据列表
      getDataList () {
        this.dataList = []
        this.dataList1 = []
        this.spanArr = []
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/api/stastic/uv'),
          method: 'post',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'startDate': this.dataForm.selectDate == null ? '' : this.dataForm.selectDate[0],
            'endDate': this.dataForm.selectDate == null ? '' : this.dataForm.selectDate[1],
            'marketId': this.dataForm.marketId
          })
        }).then(({data}) => {
          if (data && data.errno === 0) {
            this.dataList = data.data
            for (var i = 0; i < this.dataList.length; i++) {
              for (var j = 0; j < this.dataList[i].list.length; j++) {
                this.dataList[i].list[j].applySum = this.dataList[i].applySum;
                this.dataList[i].list[j].detailSum = this.dataList[i].detailSum;
                this.dataList1.push(this.dataList[i].list[j])
              }
            }
            this.dataList1.forEach((item, index) => {
              if (index === 0) {
                this.spanArr.push(1)
                this.position = 0
              } else {
                if (this.dataList1[index].date === this.dataList1[index-1].date) {
                  this.spanArr[this.position] += 1
                  this.spanArr.push(0)
                } else {
                  this.spanArr.push(1)
                  this.position = index
                }
              }
            })
          } else {
            this.dataList1 = []
          }         
          this.dataListLoading = false
        })
      },
      objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 5 || columnIndex === 6) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  .mod-picker {
    > .el-range-separator{
      padding:0px 0px !important;
    }
    margin-bottom: 30px;
  }
  .uv-count{
   font-size:20px;
   color:#606266;
   position:relative;
   bottom:10px;
  }
  .el-table__body tr{
   height:30px;
  }
</style>